<!-- 
  获取仓库的 state 的方式有哪些：
      1. 直接使用
      2. 计算属性使用
  
  如果想解构使用 state 的方式有哪些：
      1. 使用 toRef 获取
          const age = toRef(useProductStore(), 'age');
      2. 使用 pinia storeToRefs
          相比较 官方的 toRefs 更高效，会只针对仓库中的 state 与 getters 相关的数据做 ref 的转换
 -->

<template>
  <h2>GetState</h2>
  <button @click="app.count++">直接使用， {{ app.count }}</button>
  <button @click="count++">计算属性使用，{{ count }}</button>
  <button @click="age++">age: {{ age }}</button>
  <button @click="list.push(5)">对 list 做追加</button>
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul>
</template>

<script lang="ts" setup>
import { computed, toRef, toRefs } from "vue";
import { storeToRefs } from "pinia";
import useAppStore from "../stores/app";
import useProductStore from "../stores/product";

const app = useAppStore();
const count = computed(() => app.count);

const { list } = storeToRefs(useAppStore());
const product = useProductStore();
// const { raw, age } = useProductStore();
// console.log("list", list);
// console.log("age", age);
// console.log("product.age", product.age);

// const age = toRef(product, "age");
// console.log("age", age);

const aaaa = toRefs(product);
const bbbb = storeToRefs(product);

// console.log("aaaa", aaaa);
// console.log("bbbb", bbbb);

const { age } = bbbb;
</script>
